<template>
    <div>
        <p>{{name}}</p>
        <button @click="changeName">changeName</button>
        <p>{{age}}</p>
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
    // watch 可以监听props data computed
    /**
     * watchEffect用于自动收集响应式数据的依赖；watch需要手动指定侦听的数据源；
     */
    setup() {
        const name = ref("name")
        const age = ref(18)

        const changeName = () => name.value = "kobe"

        const changeAge = () => age.value++

        watchEffect(()=>{   //默认会立即执行
            console.log("name",name.value,"age",age.value); //自动搜集      //这相当一个依赖,只要改变就会触发,所以一开始会执行

        })
        return {
            name,
            age,
            changeName,
            changeAge
        }
    }
}
</script>

<style lang="scss" scoped>
</style>